<template>
  <div class="app-container">
    <el-form size="mini" :inline="true" :model="searchForm" @keyup.enter.native="getDataList()">
      <el-form-item label="" prop="name">
        <el-input v-model="searchForm.name" placeholder="请输入名称关键词" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="getDataList()" type="primary">查询</el-button>
        <el-button size="mini" @click="refInfo()" type="primary">刷新</el-button>
        <el-button size="mini" @click="addOrUpdateHandle()" type="primary" v-if="Jurisdictionlist.indexOf('Add') > -1">新增</el-button>
        <!--        <el-button  size="mini" @click="addOrUpdateHandle()" type="primary">新增</el-button>-->
      </el-form-item>
    </el-form>
    <el-table :data="dataList" size="mini" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 700px">
      <el-table-column prop="name" header-align="center" align="center" label="角色名称" />
      <el-table-column prop="remark" header-align="center" align="center" label="描述">
        <!--        <template slot-scope="scope">-->
        <!--          <div @click="opentoast(scope.row)">{{scope.row.role_num}}</div>-->
        <!--        </template>-->
      </el-table-column>
      <el-table-column prop="created_time" header-align="center" align="center" label="创建时间">
        <!--        <template slot-scope="scope">-->
        <!--          {{scope.row.status == 1 ? '启用' : '禁用' }}-->
        <!--        </template>-->
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="200" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain @click="addOrUpdateHandle(scope.row)" v-if="Jurisdictionlist.indexOf('Edit') > -1">编辑 </el-button>
          <el-button size="mini" type="danger" plain @click="handleDel(scope.row)" v-if="Jurisdictionlist.indexOf('Delete') > -1">删除 </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination small style="margin-top: 10px" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdate" @refreshList="getDataList"></add-or-update>

    <!-- 操作人员提示 弹出框-->
    <el-dialog title="使用中的用户" center :visible.sync="addOrUpdateVisible" width="500px" :before-close="handleClose">
      <div v-for="(item, index) in userole" :key="index" style="font-size: 16px; text-align: center; margin-bottom: 10px">
        {{ item }}
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="handleClose()">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import AddOrUpdate from './add-or-update'
import { delRoleApi, roleMenusApi, rolesApi } from '../../../api/system'

export default {
  data() {
    return {
      userole: [], // 操作人员
      Jurisdictionlist: [], // 权限列表
      roleOptions: [], // 初始角色权限
      searchForm: {
        name: '',
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
    }
  },
  components: {
    AddOrUpdate,
  },
  mounted() {
    this.getDataList()
    this.getinitialrole()
    this.Jurisdictionlist = JSON.parse(localStorage.getItem('jurisdiction'))[this.$route.path] || []
  },
  computed: {},
  methods: {
    handleClose() {
      this.addOrUpdateVisible = false
    },
    opentoast(row) {
      this.userole = row.use_roles
      if (row.use_roles.length > 0) {
        this.addOrUpdateVisible = true
      } else {
        this.$message.warning('暂无使用中的用户')
      }
    },
    getinitialrole() {
      // 获取初始化的权限
      roleMenusApi({})
        .then((res) => {
          this.roleOptions = res.data
        })
        .catch((e) => {})
    },
    handleDel(row) {
      this.$confirm('确认删除该角色吗?', '提示', {
        type: 'warning',
      })
        .then(() => {
          let para = {
            id: row.id,
          }
          delRoleApi(para).then((res) => {
            if (res.code == 200) {
              this.$message.success('删除成功')
              this.getDataList()
            }
          })
        })
        .catch(() => {})
    },
    //重置
    refInfo() {
      this.searchForm.name = ''
      this.searchForm.status = ''
      this.getDataList()
    },
    handleClick(tab, event) {
      this.getDataList()
    },
    clearProcess() {},
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      const info = Object.assign({ pageNumber: this.pageIndex, pageSize: this.pageSize }, this.searchForm)
      rolesApi(info)
        .then((res) => {
          this.dataList = res.result.items
          this.totalPage = res.result.total
          this.dataListLoading = false
        })
        .catch((e) => {
          this.dataList = []
          this.totalPage = 0
          this.dataListLoading = false
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {},
    // 新增 / 修改
    addOrUpdateHandle(row) {
      this.$refs.addOrUpdate.open(row, this.roleOptions)
    },
  },
}
</script>

<style>
.my-btn .el-form-item__content {
  width: 100%;
}
</style>
<style scoped>
.usestyle {
  font-size: 18px;
  text-align: center;
}
</style>
